<template>
	<div>
		<el-checkbox-group v-model="select_list" @change="onChange" size="small">
			<el-checkbox
				v-for="item in courseShape_list"
				:label="item.label"
				:key="item.value"
				size="mini"
				border
				@close="handleClose(item.value)"
				>

				<p @contextmenu.stop.prevent="open(item.value, $event)">
					{{ item.label }}
				</p>

				</el-checkbox
			>
		</el-checkbox-group>
		<el-input
			v-if="inputVisible"
			v-model="inputValue"
			class="input-new-tag"
			placeholder="输入数据后按回车键确认"
			size="mini"
			@keyup.enter="handleInputConfirm"
			@blur="handleInputConfirm"
		>
		</el-input>
		<el-button v-else class="addInput" size="mini" @click="showInput" type="success"
			>新增</el-button
		>

		<el-dialog
			v-model="visible"
			title="修改"
			width="30%"
			>
			<span><el-input v-model="editingValue" placeholder='请输入修改后的值'></el-input></span>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleDialogClose">取消</el-button>
					<el-button type="primary" @click="handleDialogEdit">确认</el-button
					>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import axios from "axios";
import { defineComponent, inject, onMounted, toRefs, reactive, ref, watch, toRaw } from "vue";
import { isArray } from "/@/core/utils";
import { ContextMenu } from "cl-admin-crud-vue3";

export default defineComponent({
	name: "courseShape_old",

	props: {
		modelValue: [String, Number, Array]
	},

	// props: {
	// 	value: {
	// 		type: String,
	// 	}
	// },

	emits: ["update:modelValue"],

	setup(props, { emit }) {
		// 请求服务
		const service = inject<any>("service");

		// 数据列表
		const list = ref<any[]>([]);


		const visible = ref(false);

		const editingValue = ref('')

		const beforeChangeValue = ref('')

		const handleDialogClose = function(){
			visible.value =false
			beforeChangeValue.value = ''
			editingValue.value = ''
		}

		const handleDialogEdit = function(){
			editInput(beforeChangeValue.value,editingValue.value)
			visible.value =false
			beforeChangeValue.value = ''
			editingValue.value = ''
		}

		// 删除多选框
		async function delInput(value = null) {
			if (value instanceof Array) {
				select_list.value.forEach((i) => {
					courseShape_list.value.forEach((item, index) => {
						if (i === item.value) {
							courseShape_list.value.splice(index, 1);
						}
					});
				});
			} else {
				courseShape_list.value.forEach((item, index) => {
					if (value === item.value) {
						courseShape_list.value.splice(index, 1);
					}
				});
			}

			courseShape_info.value.data = JSON.stringify(courseShape_list.value);

			await service.base.system.param.update(courseShape_info.value);
		}

		// 修改
		async function editInput(before,current) {
			courseShape_list.value.forEach((item, index) => {
				if (before === item.value) {
					courseShape_list.value[index] = {value:current,label:current}
				}
			});

			courseShape_info.value.data = JSON.stringify(courseShape_list.value);

			await service.base.system.param.update(courseShape_info.value);
		}

		// 右键菜单
		function open(value, event) {
			ContextMenu.open(event, {
				list: [
					{
						label: "修改",
						"suffix-icon": "el-icon-edit",
						callback: (_: any, done: Function) => {
							// ElMessage.success("点击了修改");
							visible.value = true;
							beforeChangeValue.value = value
							done();
						}
					},
					{
						label: "删除",
						"suffix-icon": "el-icon-delete",
						callback: (_: any, done: Function) => {
							delInput(value);
							// ElMessage.error("点击了删除");
							done();
						}
					}
				]
			});
		}

		// 选中的列表

		const select_list = ref<any[]>([]);

		// 用来保存机械原理在数据库存储的信息
		const courseShape_info = ref<any>(null);

		// 定义课程Shape列表
		const courseShape_list = ref([]);

		// 获取课程造型
		const getcourseShape = async function () {
			const res = await service.base.system.param.list({ keyName: "courseShape" });
			courseShape_info.value = res[0];
			// 将json字符串转换为json对象
			let classLevel = eval("(" + res[0].data + ")");
			classLevel.forEach((item) => {
				courseShape_list.value.push({
					value: "" + item.value,
					label: item.label
					// type: "success"
				});
			});
		};

		onMounted(async () => {
			// 获取机械原理
			await getcourseShape();
		});

		// 绑定值
		const value = ref<any>();

		const checked = ref<any>(false);

		const inputVisible = ref<boolean>(false);

		const dynamicTags = ref<any[]>(["Tag 1", "Tag 2", "Tag 3"]);

		const inputValue = ref<string>("");

		function handleClose(tag) {
			dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
		}

		function showInput() {
			inputVisible.value = true;

			// nextTick(() => {
			//   refs.value.inputTag.input.focus()
			// })
		}

		async function handleInputConfirm() {
			const inputVal = inputValue.value;
			if (inputVal) {
				courseShape_list.value.push({
					value: inputVal,
					label: inputVal
				});
			}
			inputVisible.value = false;
			inputValue.value = "";

			// console.log(""+ JSON.stringify(courseShape_list.value));

			// console.log(service);
			// console.log(beautifyJs(courseShape_list.value));

			courseShape_info.value.data = JSON.stringify(courseShape_list.value);

			await service.base.system.param.update(courseShape_info.value);
		}

		// 绑定值回调
		function onChange(val: any) {
			emit("update:modelValue", select_list.value);
		}

		// 解析值
		// 解析值
		watch(
			() => props.modelValue,
			(val: any) => {
				select_list.value = isArray(val) ? val : [];
			},
			{
				immediate: true
			}
		);

		onMounted(async () => {
			console.log(service);

			list.value = await service.studentService.list();
			console.log(list.value);
		});

		return {
			list,
			value,
			onChange,
			handleClose,
			showInput,
			handleInputConfirm,
			checked,
			inputVisible,
			inputValue,
			dynamicTags,
			select_list,
			courseShape_list,
			delInput,
			// 弹出框
			visible,
			editingValue,
			handleDialogClose,
			handleDialogEdit,
			// 右键菜单
			open
		};
	}
});
</script>

<style>
.el-tag + .el-tag {
	margin-left: 10px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}

/* .addInput{
	margin-left: 0px !important;
} */

.el-checkbox.is-bordered + .el-checkbox.is-bordered {
	margin-left: 0px !important;
}

.input-new-tag {
	margin-left: 0px;
}
</style>
